<template>
    <div>
        <div v-if="data.singleImg.using" class="wraper">
            <div  class="body">
                <!--单图片-->
                <div class="banner">
                    <div class="banner-img">
                        <img :src="data.singleImg.src">
                    </div>
                    <div class="user">
                        <div class="user-img">
                            <img :src="data.userInfo.headImg">
                        </div>
                        <span class="user-name">{{data.userInfo.name}}</span>
                        <span class="ad-info">{{data.adText ||'动态消息链接描述'}}</span>
                    </div>
                    <div class="btn">
                        <span class="detail">{{actionCall == '无按钮'?'打开连接':actionCall}}？</span>
                        <span class="btn-true">是</span>
                        <span class="btn-false">否</span>
                    </div>
                </div>
            </div>
            <div class="footer">
                <span class="ad-title">Audience Network 的广告将显示在第三方移动应用和移动网站中。</span>
                <span class="ad-content">请注意，这只是预览。广告在其他应用和网站可能有不同显示。</span>
            </div>
        </div>
        <div v-else-if="data.carousel.using" class="wraper">

            <div class="body">
                <div class="carousel">
                    <span class="iconfont icon-close"></span>
                    <el-carousel
                        @change="imgChange" 
                        :interval="3000" 
                        indicator-position="outside"  :autoplay="true" arrow="never"
                        style="height:450px;"
                        >
                        <el-carousel-item v-for="(item,i) in data.carousel.src" :key="i" style="height:450px;">
                            <img class="carousel-img" :src="item">
                        </el-carousel-item>
                    </el-carousel>
                    <div class="single-text">
                        <span class="ad-title">{{adverTitle || '标题'}}</span>
                        <span class="ad-info">{{data.adText ||'动态消息链接描述'}}</span>
                    </div>
                </div>
            </div>
            <div class="footer">
                <span class="ad-title">Audience Network 的广告将显示在第三方移动应用和移动网站中。</span>
                <span class="ad-content">请注意，这只是预览。广告在其他应用和网站可能有不同显示。</span>
            </div>
        </div>
        <div v-else>
            <dont-support-message :type="type"/>
        </div>
    </div>
    
</template>

<script>
    import Vue from 'vue'
    import { Carousel,CarouselItem } from 'element-ui'
    import { mapGetters, mapMutations ,mapActions} from 'vuex'

    import DontSupportMessage from '~components/ad-preview/dont-support-message.vue'

    Vue.use(Carousel)
    Vue.use(CarouselItem)

    export default {
        components: {
            DontSupportMessage,
        },
        props: {
            'data': {
                default: {}
            }
        },
        
        data (){
            return {
                type:'Audience Network',
                imgIndex:0
            }
        },
        computed: {
            ...mapGetters([
                'adCreate'
            ]),
            actionCall:function(){
                let text = "";
                if(this.data.singleImg.using){
                    text = this.data.singleImg.actionCall;
                }else if(this.data.carousel.using){
                    text = this.data.carousel.imageInfo[0].actionCall;
                    //text = this.data.carousel.imageInfo[this.imgIndex].actionCall;
                }else if(this.data.video.using){
                    text = this.data.video.actionCall;
                }
                return text || "详细了解";
            },
            adverTitle: function () {
                if(this.data.singleImg.using){
                    this.title = this.data.singleImg.title;
                }else if(this.data.carousel.using){
                    this.title = this.data.carousel.imageInfo[0].title;
                    //this.title = this.data.carousel.imageInfo[this.imgIndex].title;
                }else if(this.data.video.using){
                    this.title = this.data.video.title;
                }
                return this.title || "";
            }
        },
        methods: {
            imgChange(index){
                this.imgIndex = index
            }
        },
        created () {
        }
    }
</script>

<style lang="scss" scoped>
    *{
        box-sizing: border-box;
    }
    .wraper{
        overflow: hidden;
        position: relative;
        width: 310px;
        height: 548px;
        margin: 10px auto;
        padding: 0 8px;
        
        // border: 1px solid rgba(0,0,0,.3);
        background-color: #fff;
        word-wrap: break-word;
        color: #191919;
        font-family: Helvetica, Arial, Lucida Grande, sans-serif;
        font-size: 13px;
        line-height: 1.358;
    }
    .body{
        // border:2px solid rgb(196, 210, 231);
        overflow: hidden;
        background-image: url('~assets/img/phone-insert.png');
        background-repeat: no-repeat;
        background-size: contain;
        margin: 0 auto;
        position: relative;
        width: 258px;
        height: 420px;
        .banner{
            position:absolute;
            top:57px;
            left:25px;
            width:428px;
            height: 652px;
            transform: scale(0.5);
            transform-origin: 0 0;
            border:1px solid rgba(196, 210, 231, 1);
            overflow: hidden;
        }
        .carousel{
            position:absolute;
            top:57px;
            left:25px;
            width:428px;
            height: 652px;
            transform: scale(0.5);
            transform-origin: 0 0;
            border:1px solid rgba(196, 210, 231, 1);
            overflow: hidden;
            .carousel-img{
                width: 100%;
                height: 450px;
            }
            .icon-close{
                display: inline-block;
                position:absolute;
                float: left;
                padding:5px;
                font-size: 12px;
                z-index: 100;
                color: #fff;
                right: 10px;
                top:10px;
                border-radius:10px;
                background-color: rgba(31,45,61,.23);
            }
        }
    }
    .banner-img{
        width:428px;
        height: 220px;
        overflow: hidden;
        img{
            width:428px;
            height: 220px;
            border:none;
        }

    }
    .user{
       width:100%;
       height: 204px;
       padding-top:10px;
       .user-img{
            width: 64px;
            height: 64px;
            margin:0 auto;
            img{
                width: 64px;
                height: 64px;
            }
       }
       .user-name{
            display: inline-block;
            width: 100%;
            height: 70px;
            line-height: 70px;
            text-align: center;
            font-size: 18px;
            overflow: hidden;
       }
       .ad-info{
            display: inline-block;
            width: 386px;
            height: 60px;
            line-height: 30px;
            margin:0 20px;
            text-align: center;
            font-size:16px;
            overflow: hidden;
       }
    }
    .btn{
        margin-top: 40px;
        padding:0 20px;
        background-color:#F6F7F8;
        width: 100%;
        overflow: hidden;
        span{
            display: block;
            text-align: center;
        }
        .detail{
            height: 64px;
            line-height: 64px;
            font-size:16px;
        }
        .btn-true{
            background: rgba(86, 144, 255, 1);
            color:#fff;
            height: 40px;
            line-height: 40px;
            margin-bottom: 20px;
            cursor: pointer;
        }
        .btn-false{
            background: 0;
            border: 1px solid #D0D3D8;
            border-radius: 2px;
            color: rgba(144, 150, 162, 1);
            height: 40px;
            line-height: 40px;
            cursor: pointer;
        }
    }
    .footer{
        margin-top: 15px;
        span{
            display: block;
            text-align: center;
        }
        .ad-title{
            font-weight: bold;
            margin-bottom: 10px;
            color: #999;
            font-size: 11px;
        }
        .ad-content{
            color: #999;
            font-size: 11px;
        }
    }
    .single-text{
        padding:30px 30px 0 30px;
        span{
            display: block;
        }
        .ad-title{
            color: #4b4f56;
            font: 20px "SFUIText-Semibold";
            line-height: 32px;
            margin-bottom: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            border-bottom:1px solid rgba(196, 210, 231, 1);
        }
        .ad-info{
            color: #4b4f56;
            font: 20px "SFUIText-Regular";
            height: 64px;
            line-height: 32px;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
        }

        .detail{
            text-align: center;
            height: 64px;
            line-height: 64px;
            color: #4080FF;
            cursor: pointer;
        }
    }

    
</style>
